{include file="header"/}
<link rel="stylesheet" type="text/css" href="../../../static/comment/css/msg_list.css" />
<link rel="stylesheet" type="text/css" href="../../../static/comment/css/pagination.css" />
<script src="../../../static/comment/js/jquery.pagination.js" type="text/javascript" charset="utf-8"></script>
<div>
	<div id="side_box" class="col-lg-3 col-lg-offset-2">
		<ul>
			<li id="system_notice" class="active">
				<a>
					<img class="per_phone" src="../../../static/comment/img/通知.png" alt="通知图标" />
					<span class="side_name">系统通知</span>
				</a>
			</li>
			<li id="msg_notice">
				<a>
					<img class="per_phone" src="../../../static/comment/img/消息.png" alt="提示图标" />
					<span class="side_name">消息提示</span>
				</a>
			</li>
			{volist name="side_list" id="side"}
			<li class="per_side">
				<a>
					<img class="per_photo" alt="头像" />
					<span class="user_id">{$side.user_id}</span>
					<span class="user_name">{$side.user_name}</span>
					<span class="cancel">&nbsp;</span>
				</a>
			</li>
			{/volist}
		</ul>

	</div>
	<div id="msg_box" class="col-lg-5">
		<p>全部信息</p>
		<ul>

		</ul>
		<div id="pagination" class="M-box4"></div>
		<div id="input_box">
			<textarea class="form-control" rows="3" cols="" placeholder="文明上网，礼貌用语"></textarea>
			<a class="btn btn-default" id="send_talk_msg">发送</a>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function() {
		//页面加载完毕默认显示系统通知
		$(document).ready(function() {
			showMsg(0);
		})
		
		
		// 得到系统通知、消息提示
		var showMsg = function(topic) {
			$.ajax({
				type: "get",
				url: "../../index/Message/getmesgbytopic",
				async: true,
				data: {
					'topic': topic
				},
				success: function(reg) {
					if(reg) {
						$('#pagination').pagination({
							totalData: reg.length,
							showData: 5,
							coping: false,
							callback: function(api) {
								$("#msg_box ul").text("");
								var str = "";
								for(var i = api.getCurrent() * 5 - 5; i < api.getCurrent() * 5 && i < reg.length; i++) {
									str += "<li><p class=\"info\"><span class=\"msg_id\">" + reg[i].msg_id + "</span>";
									str += "<span class=\"flag_id\">" + reg[i].flag_id + "</span>";
									str += "<span class=\"topic\">" + reg[i].topic + "</span>";
									str += "<span class=\"del\">&nbsp&nbsp  &nbsp&nbsp</span>";
									str += "<span class=\"time\">" + reg[i].time + "</span><p>";
									str += "<p>" + reg[i].content + "</p>"
									str += "</li>";
								}
								$("#msg_box ul").append(str);
							}
						}, function(api) {
							$("#msg_box ul").text("");
							var str = "";
							for(var i = 0; i < 5 && i < reg.length; i++) {
								str += "<li><p class=\"info\"><span class=\"msg_id\">" + reg[i].msg_id + "</span>";
								str += "<span class=\"flag_id\">" + reg[i].flag_id + "</span>";
								str += "<span class=\"topic\">" + reg[i].topic + "</span>";
								str += "<span class=\"del\">&nbsp&nbsp  &nbsp&nbsp</span>";
								str += "<span class=\"time\">" + reg[i].time + "</span><p>";
								str += "<p>" + reg[i].content + "</p>"
								str += "</li>";
							}
							$("#msg_box ul").append(str);
						});
					}
				}
			})

		}
		// 得到对话消息
		var showTalk = function(sender_id) {
			$.ajax({
				type: "get",
				url: "../../index/Message/getmesgbyuserid",
				async: true,
				data: {
					'sender_id': sender_id
				},
				success: function(reg) {
					if(reg) {
						$('#pagination').pagination({
							totalData: reg.length,
							showData: 5,
							coping: false,
							callback: function(api) {
								$("#msg_box ul").text("");
								var str = "";
								for(var i = api.getCurrent() * 5 - 5; i < api.getCurrent() * 5 && i < reg.length; i++) {
									str += "<li><p class=\"info\"><span class=\"msg_id\">" + reg[i].msg_id + "</span>";
									str += "<span class=\"topic\">" + reg[i].topic + "</span>";
									str += "<span class=\"time\">" + reg[i].time + "</span><p>";
									str += "<p>" + reg[i].content + "</p>"
									str += "</li>";
								}
								$("#msg_box ul").append(str);
							}
						}, function(api) {
							$("#msg_box ul").text("");
							var str = "";
							for(var i = 0; i < 5 && i < reg.length; i++) {
								str += "<li><p class=\"info\"><span class=\"msg_id\">" + reg[i].msg_id + "</span>";
								str += "<span class=\"topic\">" + reg[i].topic + "</span>";
								str += "<span class=\"time\">" + reg[i].time + "</span><p>";
								str += "<p>" + reg[i].content + "</p>"
								str += "</li>";
							}
							$("#msg_box ul").append(str);
						});
					}
				}
			})
		}


		//页面点击系统通知侧边栏
		$("#system_notice").on("click", function() {
			if(!$(this).hasClass("active")) {
				//隐藏右侧内容 更改左侧状态
				$("#msg_box ul").html("");
				$("#side_box").find(".active").eq(0).removeClass("active");
				//添加右侧内容 更改左侧状态 
				showMsg(0);
				$("#input_box").css("display","none");
				$(this).addClass("active");
			}
		})
		//页面点击消息提示侧边栏
		$("#msg_notice").on("click", function() {
			if(!$(this).hasClass("active")) {
				//隐藏右侧内容 更改左侧状态
				$("#msg_box ul").html("");
				$("#side_box").find(".active").eq(0).removeClass("active");
				//添加右侧内容 更改左侧状态 
				showMsg(1);
				$("#input_box").css("display","none");
				$(this).addClass("active");
			}
		})
		//页面点击人物侧边栏 渲染聊天输入款
		$("#side_box").delegate(".per_side", "click", function() {
			if(!$(this).hasClass("active")) {
				//隐藏右侧内容 更改左侧状态
				$("#msg_box ul").html("");
				$("#side_box").find(".active").eq(0).removeClass("active");
				//添加右侧内容 更改左侧状态 显示输入框
				var sender_id = $(this).find("span.user_id").eq(0).text();
				showTalk(sender_id);
				$("#input_box").css("display","block");
				$(this).addClass("active");
			}
		})
		
		//添加新的聊天信息
		$("#send_talk_msg").on("click",function(){
			var receiver_id = $("#side_box li.active").find(".user_id").text();
			var content = $("#input_box textarea").val();
			$.ajax({
				type:"post",
				url:"../../index/Message/addtalkmsg",
				async:true,
				data:{
					'receiver_id':receiver_id,
					'content':content
				},
				success:function(data){
					if(data=="0"){
						showTalk(receiver_id);
						alert("已发送");
					}
				},
				error:function(){
					alert("服务器出错了")
				}
			});
		})
		
	})
</script>
{include file="footer"/}